<template>
	<view id="app">
		<view class="router-view">
			<home v-if="tabIndex == 0"></home>
			<find v-else-if="tabIndex == 1"></find>
			<message v-else-if="tabIndex == 2"></message>
			<my v-else></my>
		</view>
		<tab-bar @tabChange="tabChange"></tab-bar>
	</view>
</template>

<script>
	import Home from '../home/home.vue'
	import Find from '../find/find.vue'
	import Message from '../message/message.vue'
	import My from '../my/my.vue'
	import TabBar from '@/components/tabBar.vue'
	export default {
		components: { Home,Find, Message, My, TabBar },
		data() {
			return {
				title: 'Hello',
				tabIndex: 0,
			}
		},
		onLoad() {

		},
		methods: {
			tabChange (val) {
				console.log(val,'tab改变了')
				this.tabIndex = val
			}			
		}
	}
</script>

<style lang="less" scoped>
	#app {
		width: 100%;
		height: 100%;
		box-sizing: border-box;
		padding-bottom: 168upx;
		.router-view {
			// yemian
			width: 100%;
			height: 100%;
		}
	}
</style>
